<template>
  <div class="app-container">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="6" :md="12" :sm="24">
            <a-form-item label="平台">
              <a-select placeholder="运营平台" v-model="queryParam.belong" >
                <a-select-option :value="item.val" v-for="(item, index) in belongUl" :key="index" >{{ item.name }}</a-select-option >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="12" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons" >
              <a-button type="primary" @click="searchQuery" icon="search" >查询</a-button >
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px" >重置</a-button >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>  
    <!--工具栏-->
    <div class="head-container">
      <a-button v-permission="permission.add" class="filter-item" type="primary" icon="plus" @click="crudCreate" >新增</a-button>
    </div>
    <!--表格渲染-->
    <a-table
      size="middle"
      row-key="id"
      :columns="columns"
      :data-source="tableData"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange"
      @expand="expand"
    >
      <span slot="action" slot-scope="text, record" >
        <udOperation
          :data="record"
          :permission="permission"
          :disabled-dle="record.id === 1"
          @crudUpdate="crudUpdate"
          @crudDelete="crudDelete(record.id)"
        />
      </span>
    </a-table>
    <!--表单组件-->
    <menu-update-modal ref="updateForm" @closeModal="closeModal"></menu-update-modal>
  </div>
</template>

<script>
import ApiTree from '@/api/system/menu';
import IconSelect from '@/components/IconSelect';
import udOperation from '@crud/UD.operation';

import { Slime, crud } from '@/mixins/slime';
import MenuUpdateModal from './menuUpdateModal';

export default {
  name: 'Menu',
  components: {
    IconSelect,
    udOperation,
    MenuUpdateModal
  },
  mixins: [Slime],
  data() {
    return {
      belongUl:[
        { name: "运营平台", val: 1 },
        { name: "商家平台", val: 2 },
      ],
      menus: [],
      // table
      tableData: [],
      columns: [
        {
          title: '菜单标题',
          align: 'left',
          dataIndex: 'title',
        },
        {
          title: '图标',
          align: 'left',
          dataIndex: 'icon',
          scopedSlots: { customRender: 'icon' },
        },
        {
          title: '排序',
          align: 'left',
          dataIndex: 'sort',
        },
        {
          title: '权限标识',
          align: 'left',
          dataIndex: 'permission',
        },
        {
          title: '组件路径',
          align: 'left',
          dataIndex: 'component',
        },
        {
          title: '外链',
          align: 'left',
          dataIndex: 'iframe',
        },
        {
          title: '创建日期',
          align: 'left',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      permission: {
        add: ['admin', 'menu:add'],
        edit: ['admin', 'menu:edit'],
        del: ['admin', 'menu:del'],
      },
    };
  },
  created() {
    // this.queryParam.belong = 1
    crud(ApiTree)
    this.loadData();
  },
  methods: {
    // 加载表格数据
    loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      ApiTree.getMenusTree(0, this.queryParam.belong).then((res) => {
        let data = res.result;
        const tableData = data.map(function (item) {
          if (item.subCount > 0) {
            let children = [];
            item = { ...item, children: children };
          }
          return item;
        });
        this.tableData = tableData;
      });
    },
    // 点击展开
    expand(expanded, record) {
      ApiTree.getMenusTree(record.id, this.queryParam.belong).then((res) => {
        let data = res.result;
        const tableData = data.map(function (item) {
          if (item.subCount > 0) {
            let children = [];
            item = { ...item, children: children };
          }
          return item;
        });
        this.childSearch(this.tableData, record.id, tableData);
      });
    },
    // 对于点击展开的对象进行赋值
    childSearch(obj, id, childrenVal) {
      let existence = false;
      obj.map((item) => {
        if (item.id == id) {
          existence = true;
          if (item.subCount > 0) {
            item.children = childrenVal;
          }
        }
        if (!existence && item.subCount > 0) {
          this.childSearch(item.children, id, childrenVal);
        }
      });
    },
    // 新增与编辑前做的操作
    // [CRUD.HOOK.afterToCU](crud, form) {
    //   this.menus = [];
    //   if (form.id != null) {
    //     if (form.pid === null) {
    //       form.pid = 0;
    //     }
    //     this.getSupDepts(form.id);
    //   } else {
    //     this.menus.push({ id: 0, label: '顶级类目', children: null });
    //   }
    // },
    // 表格-加载子节点
    getMenus(tree, treeNode, resolve) {
      const that = this
      setTimeout(() => {
        crudMenu.getMenusTree(tree.id, that.queryParam.belong).then((res) => {
          resolve(res.result);
        });
      }, 100);
    },
    // 弹窗-加载上级菜单
    getSupDepts(id) {
      crudMenu.getMenuSuperior(id).then((res) => {
        const children = res.result.map(function (obj) {
          if (!obj.leaf && !obj.children) {
            obj.children = null;
          }
          obj = { ...obj, label: obj.title };
          return obj;
        });
        this.menus = [{ id: 0, label: '顶级类目', children: children }];
      });
    },
    // 弹窗-加载子节点
    loadMenus({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        crudMenu.getMenusTree(parentNode.id, that.queryParam.belong).then((res) => {
          parentNode.children = res.result.map(function (obj) {
            if (!obj.leaf) {
              obj.children = null;
            }
            obj = { ...obj, label: obj.title };
            return obj;
          });
          setTimeout(() => {
            callback();
          }, 100);
        });
      }
    },
    // 选中图标
    selected(name) {
      this.form.icon = name;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
